<template>
    <div class="page-container page-customerManage">
        <div class="operations2">
            <div class="search-user">
                <el-form :inline="true">
                    <el-form-item label="活动状态:">
                        <el-select v-model="activityStatus" placeholder="请选择">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="search-btn" @click="search">查询</div>
                    </el-form-item>
                    <el-form-item>
                        <div class="search-btn" @click="publishActivity">新增发布</div>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-tabs v-model="activityType" @tab-click="handleClick" style="margin-left: 10px;">
            <el-tab-pane label="使用时长" name="1"></el-tab-pane>
            <el-tab-pane label="使用人数" name="2"></el-tab-pane>
            <el-tab-pane label="短视频" name="3"></el-tab-pane>
        </el-tabs>
        <div class="company-manager">
            <el-table :data="activityList" border tooltip-effect="dark" style="width: 100%;"
                @selection-change="handleSelectionChange">
                <el-table-column label="编号" align="center" width="80">
                    <template slot-scope="scope">
                        <div>{{ scope.row.activityId }}</div>
                    </template>
                </el-table-column>
                <el-table-column prop="name" align="center" label="活动名称"></el-table-column>
                <el-table-column prop="status" align="center" label="活动状态" width="120"></el-table-column>
                <el-table-column prop="publishTime" align="center" label="发布时间（首次）" width="180"></el-table-column>
                <el-table-column prop="time" align="center" label="活动时间" width="220"></el-table-column>
                <el-table-column label="操作" align="center" width="150">
                    <template slot-scope="scope">
                        <div style="text-align: center;">
                            <el-button v-if="scope.row.status == '已结束'" @click="deleteActivity(scope.row)" type="text"
                                style="color: #51cdcb;">删除</el-button>
                            <el-button v-if="scope.row.status != '已结束'" @click="editActivity(scope.row)" type="text"
                                style="color: #51cdcb;">编辑</el-button>
                            <el-button @click="detail(scope.row)" type="text" style="color: #51cdcb;"
                                size="medium">详情</el-button>
                            <el-button v-if="scope.row.status == '进行中'" @click="updateActivityStatus(scope.row)" type="text"
                                style="color: #51cdcb;">下架</el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="page">
            <el-pagination @current-change="handleCurrentChange" :current-page.sync="pageNum" :page-sizes="[10]"
                :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import { queryPageActivity, updateActivityStatus, deleteActivity } from '@/api/api.js';
import { getCookie } from '@/utils/util.js';
import { serverUrl } from "@/utils/server.js";
const Qs = require('qs');

export default {
    data() {
        return {
            activityStatus: '',
            // 活动状态：0 待上线 1进行中 2已结束
            options: [
                {
                    value: '-1',
                    label: '全部'
                },
                {
                    value: '1',
                    label: '进行中'
                }, {
                    value: '0',
                    label: '待上线'
                }, {
                    value: '2',
                    label: '已结束'
                }
            ],
            pickerOptions: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            activityType: '1',
            total: 0,
            pageNum: 1,
            searchKey: '',
            activityList: [],
            activity: {
                companyName: '',
                administrator: '',
                companyId: '',
                purchaseNum: '',
                payNum: '',
                isAgent: '',
                companyType: '',
                time: ''
            }
        };
    },
    created() {
        this.getActivityList();
    },
    methods: {
        getActivityList() {
            let params = {
                pageNum: this.pageNum,
                status: this.activityStatus == "-1" ? "" : this.activityStatus,
                activityType: this.activityType
            }
            queryPageActivity(params).then(res => {
                if (res.code == 200) {
                    this.total = res.data.pageInfo.total;
                    this.activityList = res.data.pageInfo.list;
                    this.activityList.forEach(item => {
                        item.time = item.startTime + " - " + item.endTime;
                        // 活动状态：0 待上线 1 进行中 2 已结束
                        item.status = item.status == 0 ? "待上线" : item.status == 1 ? "进行中" : item.status == 2 ? "已结束" : "未知";
                    })
                } else {
                    this.activityList = [];
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.activityList = [];
            })
        },
        // 页面切换
        handleClick(tab, event) {
            this.pageNum = 1
            this.searchKey = ''
            this.activityList = []
            this.getActivityList();
        },
        search() {
            this.getActivityList();
        },
        publishActivity() {
            this.$router.push({ path: "/publishActivity", query: { activityType: this.activityType } })
        },
        handleCurrentChange() {
            this.getActivityList()
        },
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        editActivity(row) {
            sessionStorage.setItem("editOrderDetail", JSON.stringify(row));
            this.$router.push({ path: "/editActivity" });
        },
        updateActivityStatus(row) {
            row.status = 2;
            updateActivityStatus(row).then(res => {
                if (res.code === 200) {
                    this.$message({
                        message: '下架成功，即将刷新页面',
                        type: 'sussess'
                    });
                    setTimeout(() => {
                        this.getActivityList();
                    }, 200)
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'warning'
                });
            })
        },
        deleteActivity(row) {
            row.status = "";
            deleteActivity(row).then(res => {
                if (res.code === 200) {
                    this.$message({
                        message: '删除成功，即将刷新页面',
                        type: 'sussess'
                    });
                    setTimeout(() => {
                        this.getActivityList();
                    }, 200)
                } else {
                    this.$message({
                        message: res.message,
                        type: 'warning'
                    });
                }
            }).catch(err => {
                this.$message({
                    message: err.message,
                    type: 'warning'
                });
            })
        },
        detail(row) {
            this.$router.push({ path: "/buyActivity", query: { id: row.activityId } })
        },
        // 导出
        exportToExcel() {
            let params = {
                companyName: this.searchKey
            }
            if (this.activeName !== '0') {
                params.enterpriseType = this.activeName
            }
            //  配置请求头
            let headers = new Headers()
            headers.append('token', getCookie('token'))
            headers.append('Content-Type', 'application/x-www-form-urlencoded')
            fetch(serverUrl.baseURL + 'company/selectCompanyListExport', {
                headers: headers,
                method: 'POST',
                body: Qs.stringify(params)
            }).then(res => {
                return res.blob();
            }).then(res => {
                let link = document.createElement('a');
                let url = window.URL.createObjectURL(res);
                link.href = url;
                link.download = '企业列表.xls';
                link.click();
                window.URL.revokeObjectURL
            });
        }
    }
}
</script>
<style lang="scss">
.page-customerManage {
    background: #fff;
    min-height: calc(100vh - 150px);
    position: relative;
    .el-tabs__item {
        height: 74px;
        line-height: 74px;
    }
    .page {
        padding: 10px 0;
        text-align: center;
    }
    .operations2 {
        position: absolute;
        top: 20px;
        right: 10px;
        z-index: 999;
        display: flex;
        justify-content: space-between;
        height: 60px;
        align-items: center;
        .operation-btns {
            display: flex;
            div {
                border-radius: 4px;
                background: #51CDCB;
                font-size: 14px;
                line-height: 40px;
                height: 40px;
                color: #fff;
                padding: 0 20px;
                margin-right: 10px;
                cursor: pointer;
            }
            .disabled {
                background: #B9EBEA;
            }
        }
        .search-user {
            display: flex;
            .search-input {
                height: 40px;
                margin-right: 10px;
                .el-input__inner {
                    height: 40px;
                }
            }
            .search-btn {
                border-radius: 4px;
                background: #51CDCB;
                font-size: 14px;
                line-height: 40px;
                height: 40px;
                color: #fff;
                padding: 0 20px;
                cursor: pointer;
            }
            .disabled {
                background: #B9EBEA;
            }
        }
    }
    .company-manager {
        padding: 0 20px;
    }
    .customer-manage-dialog {
        .el-dialog {
            width: 450px;
            .el-dialog__header {
                text-align: center;
            }
            .el-form-item {
                margin-bottom: 10px;
            }
            .w240 {
                width: 240px;
            }
        }
    }
    .el-input__inner {
        height: 40px;
    }
}
</style>
